<template>
	<view class=" d-flex aling-centen h-100">
		<scroll-view scroll-y="true" class="h-100" style="border-right: 1px solid #999;">
			<view @tap='classFion2(index,item)' class="py-20 ml-30" v-for="(item,index) in classLIst" :key='index'>
				<text class="mr-20" :class="index==classActve2?'actve':''">{{item.title}}</text>
				 <u-icon v-if="index==classActve2" name="checkmark" color="#FF890B" size="28"></u-icon>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="nth h-100">
			<view @tap='classFion3(index,item)' class="py-20 ml-30" v-for="(item,index) in sanjiTab" :key='index'>
				<text class="mr-20" :class="index==classActve3?'actve':''">{{item.title}}</text>
				 <u-icon v-if="index==classActve3" name="checkmark" color="#FF890B" size="28"></u-icon>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:'category',
		props:{
			classLIst:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				classActve2:null,//筛选 2级导航
				classActve3:null,//筛选 3级导航
				sanjiTab:[]
			}
		},
		watch:{
			// 绑定商品二级分类
			classLIst(e){
				if(this.classActve2==null){
					this.sanjiTab=[]
					return
				}
				this.sanjiTab=e[this.classActve2].children
			},
			// 一级分类切换 改变二级分类数据
			classActve2(){
				if(this.classActve2==null){
					this.sanjiTab=[]
					return
				}
				this.sanjiTab=this.classLIst[this.classActve2].children
				this.classActve3=null
			},
			
		},
		methods:{
			classFion2(index,item){ //2
				 if(this.classActve2==index)return
				 this.classActve2=index
				 item.type=1
				 this.$emit('classification',{item,index})
			},
			classFion3(index,item){ //3
				if(this.classActve3==index)return
				this.classActve3=index
				item.type=1
				this.$emit('goodsClass',{item,index})
			},
			// 清楚选择项
			deleteTab(){
				this.classActve3=null
			},
			// 用于父组件调用 当父组件修改一级分类 
			update1Tab(){
				this.classActve2=null
			}
		}
	}
</script>

<style>
	/* 样式在父组件中 */
</style>
